<template>
  <block>
    <view class="cart-wrapper" v-if="cart.length !== 0">
      <!-- 收货地址自定义组件 -->
      <my-address></my-address>

      <!-- 购物车列表 -->
      <view class="cart-title">
        <uni-icons type="shop" size="18"></uni-icons>
        <view class="cart-text"> 购物车 </view>
      </view>

      <!-- 购物车商品列表 -->
      <uni-swipe-action>
        <block v-for="(goods, id) in cart" :key="id">
          <uni-swipe-action-item
            :right-options="options"
            @click="swiperActionsClickHandler(goods)"
          >
            <my-goods
              :goods="goods"
              :showRadios="true"
              @change-radio="radioClickHandler"
              @change-num="changeNumHandler"
            ></my-goods>
          </uni-swipe-action-item>
        </block>
      </uni-swipe-action>

      <my-settle></my-settle>
    </view>

    <view class="cart-empty" v-else>
      <image class="" src="/static/cart_empty@2x.png"> </image>
      <view class="empty-text">
        空空如也
      </view>
    </view>
  </block>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import badgeMix from "@/mixins/tabbar-badge.js";
import myGoods from "/src/components/my-goods/index";
import myAddress from "/src/components/my-address/index";
import mySettle from "/src/components/my-settle/index";

export default {
  name: "cart",
  mixins: [badgeMix],
  components: { myGoods, myAddress, mySettle },
  props: {},
  data() {
    return {
      options: [
        {
          text: "删除",
          style: {
            backgroundColor: "#c00000",
          },
        },
      ],
    };
  },
  computed: {
    ...mapState("m_cart", ["cart"]),
  },
  methods: {
    ...mapMutations("m_cart", [
      "changeState",
      "changeCount",
      "removeGoodsById",
    ]),
    // 商品勾选状态
    radioClickHandler(goods_id) {
      this.changeState(goods_id);
    },
    // 商品数量
    changeNumHandler(e) {
      this.changeCount(e);
    },
    // 左滑删除事件监听
    swiperActionsClickHandler(goods) {
      this.removeGoodsById(goods.goods_id);
    },
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {},
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style scoped lang="scss">
.cart-wrapper {
  height: 100%;
  padding-bottom: 50px;
  .cart-title {
    border-bottom: 1px solid #efefef;
    padding: 5px;
    display: flex;
    flex-direction: row;
    .cart-text {
      font-size: 12px;
      line-height: 22px;
      padding-left: 10px;
    }
  }
}

.cart-empty{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 150px;
  image{
    width: 90px;
    height: 90px;
  }
  .empty-text{
    margin-top: 10px;
    color: grey;
    font-size: 12px;
  }
}
</style>